<template>
  <view class="container">
    <!-- 搜索区域 -->
    <view class="search-container">
      <view class="search-form">
        <view class="form-group">
          <input v-model="departure" type="text" placeholder="出发地">
          <button @click="switchStations" class="switch-btn">
            <text class="iconfont">⇋</text>
          </button>
          <input v-model="arrival" type="text" placeholder="目的地">
        </view>
        
        <view class="form-group">
          <picker mode="date" :value="departureDate" @change="onDateChange">
            <view class="uni-input">{{ departureDate || '请选择日期' }}</view>
          </picker>
        </view>
        
        <button class="search-btn" @click="searchTickets">搜索车票</button>
      </view>
    </view>

    <!-- 车票列表 -->
    <view class="ticket-list">
      <view v-for="ticket in tickets" :key="ticket.id" class="ticket-item">
        <view class="train-info">
          <text class="train-number">{{ ticket.trainNumber }}</text>
          <view class="time-info">
            <text>{{ ticket.departureTime }}</text>
            <text class="duration">{{ ticket.duration }}</text>
            <text>{{ ticket.arrivalTime }}</text>
          </view>
          <view class="station-info">
            <text>{{ ticket.departure }}</text>
            <text>{{ ticket.arrival }}</text>
          </view>
        </view>
        
        <view class="price-info">
          <text class="price">￥{{ ticket.price }}</text>
          <text class="seats">余票: {{ ticket.seats }}</text>
          <button @click="addToCart(ticket)" class="add-to-cart">
            加入购物车
          </button>
        </view>
      </view>
    </view>

    <!-- 购物车图标 -->
    <view class="cart-icon" @click="navigateToCart">
      <text class="iconfont">🛒</text>
      <text class="cart-count" v-if="cartCount">{{ cartCount }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCartStore } from '@/stores/cart'
import { ticketList } from '@/mock/data'

const departure = ref('北京')
const arrival = ref('上海')
const departureDate = ref('')
const tickets = ref(ticketList)
const cartStore = useCartStore()

const cartCount = computed(() => cartStore.count)

const switchStations = () => {
  const temp = departure.value
  departure.value = arrival.value
  arrival.value = temp
}

const onDateChange = (e) => {
  departureDate.value = e.detail.value
}

const searchTickets = () => {
  // 模拟搜索，实际项目中可以根据条件筛选
  uni.showToast({
    title: '搜索成功',
    icon: 'success'
  })
}

const addToCart = (ticket) => {
  cartStore.addToCart(ticket)
  uni.showToast({
    title: '已添加到购物车',
    icon: 'success'
  })
}

const navigateToCart = () => {
  uni.navigateTo({
    url: '/pages/cart/cart'
  })
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.search-container {
  background: #f5f5f5;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.form-group input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}

.switch-btn {
  width: 80rpx;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
}

.search-btn {
  background: #42b983;
  color: white;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 8rpx;
}

.ticket-item {
  margin-bottom: 20rpx;
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
}

.train-number {
  font-size: 32rpx;
  font-weight: bold;
}

.time-info {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;
}

.duration {
  color: #666;
  font-size: 24rpx;
}

.price {
  color: #f60;
  font-size: 36rpx;
  font-weight: bold;
}

.cart-icon {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
  width: 100rpx;
  height: 100rpx;
  background: #42b983;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
}

.cart-count {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #f60;
  color: white;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}
</style> 